<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>账号设置</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<link rel="stylesheet" href="/static/wendasns/css/cropper.css">
<style type="text/css">
.layui-fluid {
    padding: 15px;
}
.avatar-add {
    position: relative;
    width: 373px;
    height: 373px;
    background-color: #F2F2F5;
}
.avatar-add p {
    position: absolute;
    top: 70px;
    width: 100%;
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    color: #999;
}
.avatar-add .upload-img {
    position: absolute;
    left: 50%;
    top: 35px;
    margin: 0 0 0 -56px;
}
.avatar-add .loading {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0;
    background-color: #000;
    opacity: 0.5;
    filter: Alpha(opacity=50);
}
/*头像*/
.portrait-up {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 168px;
    height: 168px;
    margin: -50px 0 0 -84px;
    border-radius: 100%;
}
.portrait {display: inline-block;font-size: 9em;width: 100%;height: 100%;}
.portrait span{width: 100%;height: 100%;display: flex;border-radius: 50%;color: #FFFFFF;}
.portrait img{width:100%;height: 100%;border-radius: 50%;}
.portrait i{font-style: normal;align-self: center;margin-left: auto;margin-right: auto;}
</style>
</head>

<body style="background-color: #f2f2f2;">
<div class="layui-container layui-row" style="margin-top: 10px;margin-bottom: 10px;">
  <div class="layui-card">
    <div class="layui-card-body">
      <a href="{:url('ucentre/login/index',['dispatch'=>'logout'])}" style="float: right;">退出</a>
     
      <span class="layui-breadcrumb" style="visibility: visible;">
   <a href="/"><i class="layui-icon layui-icon-home"></i> 网站首页</a><span lay-separator="">/</span>
  <a href="/user/index.html">用户中心</a><span lay-separator="">/</span>
  <a><cite>账号设置</cite></a>
</span>
    </div>
  </div>
</div>

<div class="layui-container">
  <div class="layui-card">
    <div class="layui-card-body">
      <!--选项卡-->
          <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
            <ul class="layui-tab-title">
              <li class="layui-this">我的信息</li>
              <li>头像</li>
              <li>密码</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">
          <form class="layui-form layui-form-pane" lay-filter="J_ajaxForm" action="{:url('ucentre/index/info')}" method="post">
          
            <div class="layui-form-item">
              <label class="layui-form-label">账号</label>
              <div class="layui-input-inline">
                <input type="text" value="{$loginUser.username}" class="layui-input layui-disabled" disabled="">
              </div>
            </div>
          
            <div class="layui-form-item">
              <label class="layui-form-label">手机</label>
              <div class="layui-input-inline">
                <input type="text" name="phone" value="{$loginUser.info.mobile}" class="layui-input" lay-verify="phone" autocomplete="off">
              </div>
              <div class="layui-form-mid layui-word-aux">{:hook('ucentre_phone_tab_item')}</div>
            </div>
            
            <div class="layui-form-item">
              <label class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                <input type="text" name="email" value="{$loginUser.info.email}" class="layui-input" lay-verify="email" autocomplete="off">
              </div>
              <div class="layui-form-mid layui-word-aux">{:hook('ucentre_email_tab_item')}</div>
            </div>
            
            <div class="layui-form-item">
              <button class="layui-btn" lay-submit lay-filter="J_ajax_submit_btn">保存</button>
              <span style="color: red;"></span>
            </div>
            
          </form>
              </div>
    <div class="layui-tab-item">
			<div class="avatar-add">
				<p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
				<button type="button" class="layui-btn upload-img" id="editimg"> <i class="layui-icon"></i>上传头像 </button>
				<div id="upload-normal-img" class="portrait-up">{:portrait($loginUser.uid)}</div>
        
			</div>
    </div>
              <div class="layui-tab-item">
          <form class="layui-form layui-form-pane" lay-filter="J_ajaxForm" action="{:url('ucentre/index/password')}" method="post">
          
            <div class="layui-form-item">
              <label class="layui-form-label">新密码</label>
              <div class="layui-input-inline">
                <input type="password" name="password" value="" class="layui-input" lay-verify="required" autocomplete="off">
              </div>
              <div class="layui-form-mid layui-word-aux"></div>
            </div>
            
            <div class="layui-form-item">
              <label class="layui-form-label">确认密码</label>
              <div class="layui-input-inline">
                <input type="password" name="repassword" value="" class="layui-input" lay-verify="required" autocomplete="off">
              </div>
            </div>
            
            <div class="layui-form-item">
              <button class="layui-btn" lay-submit lay-filter="J_ajax_submit_btn">保存</button>
              <span style=""></span>
            </div>
            
          </form>
              </div>
              {:hook('ucentre_info_tab_item')}
            </div>
          </div>
      <!--end-->
    </div>
  </div>
  
  {:hook('ucentre_info_extra')}
  
  <div class="layui-card">
    <div class="layui-card-header">登录记录</div>
    <div class="layui-card-body">
      <blockquote class="layui-elem-quote layui-quote-nm">以下是您最近3个月的登录记录，若存在异常登录记录，请尽快修改密码</blockquote>
      <table id="demo" lay-filter="test"></table>
    </div>
  </div>
  
</div>

<script type="text/html" id="J_table_mode_tpl">
{{# if(d.mode == 'username'){ }}
  用户名
{{#  } else if(d.mode == 'email') { }}
  邮箱
{{#  } else { }}
  手机
{{#  } }}
</script>
<script src="/static/wendasns/layui.js"></script>
<script>
layui.config({
  base: '/static/wendasns/lay/modules/' //你存放新模块的目录，注意，不是layui的模块目录
  ,version: new Date().getTime()
}).use(['dialog','template']); //加载入口
</script>
<script type="text/javascript">
layui.use(['croppers'],function(){
  var $ = layui.jquery
  ,form = layui.form
  ,upload = layui.upload
  ,croppers = layui.croppers
  ,table = layui.table;

  table.render({
    elem: '#demo'
    ,height: 'auto'
    ,url: '{:url('ucentre/index/loginlog')}'
    ,limit: 10
    ,page: false
    ,cols: [[
      {field: 'mode', title: '登录方式', minWidth:120,templet:'#J_table_mode_tpl'}
      ,{field: 'client', title: '设备名称', minWidth:120}
      ,{field: 'system', title: '系统', minWidth:120} 
      ,{field: 'create_time', title: '登录时间', minWidth: 180}
    ]]
    ,text: {
      none: '没有数据！'
    }
  });

    var uploadInst = upload.render({
      elem: '#upload-portrait'
      ,url: '{:url('ucentre/index/upload')}'
      ,before: function(obj){
        obj.preview(function(index, file, result){
          $('#upload-normal-img').html('<div class="portrait"><img src="'+result+'"></div>');
        });
      }
      ,done: function(res){
        layer.msg(res.msg);
      }
      ,error: function(){
        layer.msg('上传失败');
      }
    });
    
    form.on('submit(J_ajax_submit_btn)', function(obj){
    	var _form = $(obj.form),action = _form.prop('action'),method = _form.prop('method'),_this = $(this);
    	
        $.ajax({
            url: action
            ,type: method
            ,data: obj.field
            ,dataType: 'json'
    		,beforeSend: function(XMLHttpRequest){
    			var textnode = document.createTextNode('\u4e2d\u002e\u002e\u002e');
  	  	  		_this[0].appendChild(textnode);
  	  	  		_this.prop('disabled',true).addClass('layui-btn-disabled');
    		}
    		,complete: function(XMLHttpRequest, textStatus){
    			var org_text = _this.text();
  	  	  	  	_this.text(org_text.replace(/(\u4e2d\u002e\u002e\u002e)$/, ''));
  	  	  	  	_this.removeProp('disabled').removeClass('layui-btn-disabled');
  	  	  	}
            ,success: function(res){
                if(res.code==0){
                    location.reload();
                }else{
                    _this.next().text(res.msg);
                }
            }
    		,error: function(res){
    		    _this.next().text('\u63d0\u4ea4\u5f02\u5e38');
    		}
        });
        return false;
    });
    
        croppers.render({
            elem: '#editimg'
            ,saveW:150
            ,saveH:150
            ,mark:1/1
            ,area:'500px'
            ,url: "{:url('ucentre/index/upload')}"
            ,done: function(url){
                $('#upload-normal-img').html('<div class="portrait"><img src="'+url+'"></div>');
            }
        });
        
});
</script>
{:hook('ucentre_info_bottom_extra')}
</body>
</html>

<script type="text/html" id="J_portrait_tpl">
<div class="layui-fluid showImgEdit" style="display: none">
    <div class="layui-form-item">
        <div class="layui-input-inline layui-btn-container" style="width: auto;">
            <label for="cropper_avatarImgUpload" class="layui-btn layui-btn-primary">
                <i class="layui-icon">&#xe67c;</i>选择图片
            </label>
            <input class="layui-upload-file" id="cropper_avatarImgUpload" type="file" value="选择图片" name="file">
        </div>
        <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs7">
            <div class="readyimg" style="height:250px;width:250px;background-color: rgb(247, 247, 247);">
                <img src="" >
            </div>
        </div>
        <div class="layui-col-xs3">
            <div class="img-preview" style="width:200px;height:200px;overflow:hidden">
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs3">
            <button class="layui-btn layui-btn-fluid" cropper-event="confirmSave" type="button"> 保存修改</button>
        </div>
    </div>
</div>
</script>